<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>video</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="no">
<style>
.bottom_box {
	position: fixed;
	left: 0;
	width: 100%;
	height: 600px;
	z-index: 99;
	text-align: center;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.918);
	font-size: 16px;
}

.bottom_box>img {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	/* -webkit-border-radius: 50%; */
	/* border-radius: 50%; */
}

.bottom_box>span {
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	padding: 5px;
}
</style>
</head>

<body>
	<section id="player">
		<video id="media" width="100%" height="600px" controls="controls"
			controlsList="nodownload">
			<!-- <video id="media" width="100%" height="100%" autoplay="false" controls> -->
			<source id="v1" src="" type="audio/mpeg">
		</video>
	</section>

	<script>
		function getQueryString(name) {
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			}
			return null;
		}

		getQueryString = function(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}
		var orderId = getQueryString('order_id');
		var videoId = getQueryString('id');

		document.getElementById("v1").src = 'http://192.168.3.71:8080/fileApi/video/play?videoKey='
				+ getQueryString("videoKey");
		document.getElementById("media").load();
	</script>
</body>

</html>